<template>
	<div id="topHeader">
		<div id="header" class="header">
			<el-row type="flex" class="row-bg " justify="space-between">
				<img src="../assets/images/logo.png" alt="" width="160" height="60" id="logoImg">
				<el-menu class="el-menu-demo" mode="horizontal">
					<el-menu-item>
						<span class="iconfont icon-qq">
							<div class="qq-div">
								<ul>
									<li><a href="javascript:;">客户QQ：112345678</a></li>
									<li><a href="javascript:;">客户QQ：112345678</a></li>
									<li><a href="javascript:;">客户QQ：112345678</a></li>
									<li><a href="javascript:;">客户QQ：112345678</a></li>
								</ul>
							</div>
						</span>
					</el-menu-item>
					<el-menu-item>
							<span class="iconfont icon-tongzhi">
								<div class="tongzhi-div">
									<ul>
										<li><a href="">全部已读</a></li>
									</ul>
								</div>
							</span>
					</el-menu-item>
					<el-menu-item>
						<span class="iconfont icon-yonghu">
							<div class="yonghu-div">
								<ul>
									<li><router-link to = "/home">我的账户</router-link></li>
									<li><router-link to = "/finance/safe">我的资料</router-link></li>
									<li><a href="javascript:;" @click="exitToken()">退出</a></li>
								</ul>
							</div>
						</span>
					</el-menu-item>
				</el-menu>
			</el-row>
		</div>
	</div>
</template>

<script>
	import '../assets/font/iconfont.css'
	export default {
		name: 'v-header',
		data() {
			return {
				active: 0,
			}
		},
		methods: {
			logout(){
				this.$store.commit('setAccToken','');
			},
			dowm(index) {
				this.active = index;
			},
			exitToken(){
				this.$message({
					message: '退出成功',
					type: 'success',
					offset: 500,
				});
				setTimeout(()=>{
					this.$store.commit('setAccToken','');
					this.$router.push({path:'/'})
				},1000)
			}
		},
		mounted:function(){
			this.dowm()
		},
		props: {
			msg: String,
		},
	}
</script>

<style>
	#topHeader .iconfont{font-size: 26px;}
	#topHeader .el-menu-item{position: relative;}
	#topHeader .el-menu.el-menu--horizontal{margin-right: 30px;}
	#topHeader .el-menu--horizontal>.el-menu-item{height: 90px;line-height: 90px;border: 0;}
	#topHeader .icon-qq:hover .qq-div{display: block;}
	#topHeader .qq-div{background: #fff;position: absolute;left:-110px;font-size: 16px;z-index: 999;padding: 10px;top: 70px;box-shadow: 1px 1px 1px #303133;display: none;}
	#topHeader .qq-div li{height: 26px;line-height: 26px;color: #303133;}
	#topHeader .qq-div li a{height: 100%;width: 100%;}
	#topHeader .qq-div li:hover{color: #ff6e19;}
	
	#topHeader .tongzhi-div{background: #fff;position: absolute;left:-250px;font-size: 16px;z-index: 999;padding-top:10px;top: 70px;box-shadow: 1px 1px 1px #303133;display: none;}
	#topHeader .tongzhi-div li{height: 40px;line-height: 40px;color: #303133;background: #eee;width: 300px;padding: 0 20px;}
	#topHeader .tongzhi-div li a{height: 100%;width: 100%;}
	#topHeader .icon-tongzhi:hover .tongzhi-div{display: block; }
	
	#topHeader .icon-yonghu:hover .yonghu-div{display: block;}
	#topHeader .yonghu-div{background: #fff;position: absolute;left:-60px;font-size: 16px;z-index: 999;padding: 10px 30px;top: 70px;box-shadow: 1px 1px 1px #303133;display: none;}
	#topHeader .yonghu-div li{height: 26px;line-height: 26px;color: #303133;}
	#topHeader .yonghu-div li a{height: 100%;width: 100%;text-align: center;}
	#topHeader .yonghu-div li:hover{color: #ff6e19;}
	
</style>
